<template>
  <TableTemplate >
    <template #operator="{scope}">
      <el-button size="small" type="primary" @click="handleEdit(scope.row)"  >编辑</el-button>
      <el-popconfirm title="你要删除?">
        <template #reference>
          <el-button size="small" type="danger" >删除</el-button>
        </template>
      </el-popconfirm>
    </template>
  </TableTemplate>
  <my-form ref="child" :api="{
    create : create,
    update : update,
  }" ></my-form>
</template>


<script lang="ts" setup>
import myForm from "@/views/user/form.vue"
import { ref} from "vue";
import {getUserList,create, update} from "@/api/user";
import type {TableColumn} from "@/components/type/table";
import {useTableData} from "@/hook/useTableData";

const columns: TableColumn[] = [
  {
    prop: 'date',
    label: '日期',
    search: {
      isSearch: true,
      placeholder: '请输入日期',
      type: 'date'
    },
  },
  {
    prop: 'name',
    label: '姓名',
    search: {
      isSearch: true,
      placeholder: '请输入姓名',
      type: 'input'
    },
  },
  {
    prop: 'companySelect',
    label: '公司',
    listHidden: true,
    search: {
      isSearch: true,
      placeholder: '请悬着公司',
      type: 'select',
      optionData: [
        {
          label: '百度',
          value: '1'
        },
        {
          label: '腾讯',
          value: '2'
        },
        {
          label: '阿里',
          value: '3'
        },
      ]
    },
  },
  {
    prop: 'address',
    label: '地址',
    search: {
      isSearch: true,
      placeholder: '请输入地址',
      type: 'input'
    },
  },
  {
    prop: 'operator',
    label: '操作',
    slot: true,
  },
]
const TableTemplate = useTableData({
  columns,
  isShowPage: true,
  request: async (params:any) => {
    return await getUserList(params)
  }
})
const child = ref()
const handleEdit = (row:Object) => {
  child.value.openDialog(row)
}
</script>